<template>
    <el-container>
        <el-header>
            <span class="h1">
                <img src="@/assets/img/logo2.png" />
            </span>
            <div style="margin-left: 270px;margin-top: -40px;">
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" text-color="#141414" background-color="#bbd7e4"
                    active-text-color="#dc1111">
                    <!-- <el-menu-item index="1">旅游管理系统</el-menu-item> -->
                    <el-menu-item index="1" @click="toVsHome()">首页</el-menu-item>
                    <el-menu-item index="2" @click="toScenic()">景点信息</el-menu-item>
                    <el-menu-item index="3" @click="toVsFood()">美食信息</el-menu-item>
                    <el-menu-item index="4" @click="toVsHotel()">酒店信息</el-menu-item>
                    <!-- <el-menu-item index="5">旅游路线信息</el-menu-item>
          <el-menu-item index="6">交流论坛</el-menu-item> -->
                    <el-menu-item index="7" v-if="user.roleId === 1" @click="toHoutai()">后台管理</el-menu-item>
                    <el-menu-item index="8" @click="toVsPerson()">个人中心</el-menu-item>

                    <div>
                        <el-submenu index="9" class="submenu">
                            <template slot="title">{{ user.name }}
                                <el-avatar shape="circle" :size="40" :src="user.cover"></el-avatar>
                            </template>
                            <el-menu-item index="9-1">个人中心</el-menu-item>
                            <!-- <el-menu-item index="8-2">我的收藏</el-menu-item> -->
                            <el-menu-item index="9-3" @click="quit()">退出登录</el-menu-item>
                        </el-submenu>
                    </div>
                </el-menu>
            </div>
        </el-header>
        <el-main>
            <!-- 内容 -->
            <div style=" display: flex;" class="card">
                <el-card style="width: 30%;margin-left: 200px;height:500px;background-color: #dceaf7;">
                    <el-form ref="form" :rules="rules" :model="user" label-width="80px" style="padding-right: 20px;">
                        <div style="text-align: center;margin-bottom: 10px;">
                            <el-upload class="avatar-uploader" action="http://localhost:8090/common/upload?module=cover"
                                :show-file-list="false" :on-success="handleCoverSuccess">
                                <img v-if="user.cover" :src="user.cover" class="avatar" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <div>
                            <h3>这是是我的个人信息</h3>
                        </div>
                    </el-form>
                </el-card>
                <el-card style="width: 40%;height:500px;">
                    <h3 style="text-align: center;margin-bottom: 20px;">个人中心</h3>
                    <el-form ref="form" :rules="rules" :model="user" label-width="80px" style="padding-right: 20px;">
                        <el-form-item label="账号" prop="no">
                            <el-input v-model="user.no" placeholder="账号" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="昵称" prop="name">
                            <el-input v-model="user.name" placeholder="昵称"></el-input>
                        </el-form-item>
                        <el-form-item label="年龄" prop="age">
                            <el-input v-model="user.age" placeholder="账号"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="sex">
                            <div style="border: 1px solid rgb(220, 218, 218);border-radius: 5%;">
                                <input type="radio" v-model="user.sex" value="1" style="margin-left: -200px;">男
                                <input type="radio" v-model="user.sex" value="0" style="margin-left: 50px;">女
                            </div>

                        </el-form-item>
                        <el-form-item label="电话" prop="phone">
                            <el-input v-model="user.phone" placeholder="电话"></el-input>
                        </el-form-item>
                        <div style="text-align: center; margin-bottom: 20px">
                            <el-button type="success" @click="update()">确认修改</el-button>
                        </div>
                    </el-form>
                </el-card>

            </div>
        </el-main>
    </el-container>
</template>

<script>
export default {
    name: "VsPerson",
    data() {
        let checkAge = (rule, value, callback) => {
            if (value > 130) {
                callback(new Error('年龄输入过大'));
            } else {
                callback();
            }
        };
        return {
            user: JSON.parse(sessionStorage.getItem('CurUser')),
            activeIndex: '1',
            activeIndex2: '8',

            //limit: 3,    只显示前三项
            cover: '',
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                    // { min: 1, max: 3, message: '长度在 1 到 3 个位', trigger: 'blur' },
                    { pattern: /^([1-9][0-9]*){1,3}$/, message: '年龄必须为正整数字', trigger: 'blur' },
                    { validator: checkAge, trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '电话号码不能为空', trigger: 'blur' },
                    { pattern: /^1[2|3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' }
                ],

            }
        };
    },

    //获取数据
    mounted() {
    },
    methods: {
        update() {
            this.$refs.form.validate((valid) => {
                if (valid) {  //valid成功为true,失败为false
                    //去后台验证用户密码
                    //保存当前用户信息到数据库
                    this.$axios.post(this.$httpUrl + '/user/update', this.user).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code == 200) {
                            //成功更新
                            this.$message.success('修改成功')
                            //更新浏览器缓存的用户信息
                            sessionStorage.setItem("CurUser", JSON.stringify(this.user))

                            // 触发父组件
                            // this.$emit('update:user',this.user)
                            //强制刷新页面
                            // setTimeout(() => {
                            //     location.reload();
                            // }), 1000; // 等待一秒后刷新页面，给用户足够的时间看到成功的消息
                        } else {
                            this.$message.error(res.msg)
                        }
                    });
                } else {
                    // this.confirm_disabled = false;
                    this.$message({
                        message: '修改失败！请确认信息是否正确！',
                        type: 'error'
                    });
                    return false;
                }
            });




        },
        //头像上传
        handleCoverSuccess(res, file) {
            this.user.cover = `http://localhost:8090/common/download?name=${res.content}`
            //手动触发一下头像字段的校验
            // this.$refs.formName.validateField("cover")
            // this.user.cover = res.data
            //强制刷新一下
            this.$forceUpdate();
        },
        //各路由跳转
        toHoutai() {
            this.$router.replace('Person');
        },
        //前端的个人中心
        // toVsPerson() {
        //     this.$router.replace('VsPerson');
        // },
        //退出登录
        quit() {
            this.$router.replace('/');
        },
        //前端首页
        toVsHome() {
            this.$router.replace('VsHome');
        },
        //景点信息
        toScenic() {
            this.$router.replace('VsScenic');
        },
        //美食信息
        toVsFood() {
            this.$router.replace('VsFood');
        },
        //酒店信息
        toVsHotel() {
            this.$router.replace('VsHotel');
        },
    },
}
</script>

<style scoped>
.element.style {
    width: 120px;
}

img {
    width: 120px;
    /* margin-left: 30px; */
    /* border: 1px solid black; */

}

.el-header {
    /* background-color: #545c64; */
    color: black;
    background-color: #bbd7e4;
    border-bottom: 1px solid rgb(209, 207, 207);
    border-top: 1px solid rgb(209, 207, 207);
    line-height: 60px;
}

.el-main {
    /* background-color: #E9EEF3; */
    background: url(@/assets/img/bj5.jpg) no-repeat;
    color: #333;
    text-align: center;
    height: 600px;

}

.el-menu-demo {
    /* width: 100%; */
    /* background-color: #545c64; */
    background-color: #bbd7e4;
    margin-left: 100px;
    margin-top: -76px;

}

/* 导航栏下拉框右侧 */
.submenu {
    /* border: 1px solid black; */
    width: 150px;
    margin-left: 800px;
    /* margin-top: -32px; */
    height: 50px;
}

/* 内容 */
.main {
    border: 1px solid black;
    width: 90%;
    margin: auto;
    height: 400px;
}

/* .card{
    background: url(@/assets/img/j5.jpg) no-repeat;
} */

/* 卡片 */
.kp {
    /* margin-left:150px; */
    width: 80%;
    /* height: 300px; */
    margin: auto;
    margin-top: 10px;
    /* border: 1px solid black; */
}

.kp1 {
    margin-left: -200px;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    height: 170px;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.person {
    margin-left: 40px;
    margin-top: 40px;
    box-shadow: 0px 0px 20px -10px #0a1032;
    width: 80%;
    text-align: center;

}

/* .el-descriptions__title {
    margin: 20px;
} */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.el-upload {
    border-radius: 50%;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border-radius: 50%;
}

.avatar {
    width: 200px;
    height: 200px;
    display: block;
    margin-top: 30px;
    border-radius: 50%;
}
</style>